<template>
  <scroll-view :scroll-into-view="state.scrollId" scroll-x class="nav-scroll">
    <view
      :id="'item-' + index"
      :class="{ 'selected-item': index == props.selectIndex }"
      @click="itemAction(index)"
      v-for="(item, index) in props.categoryList"
      :key="item.id"
      class="slider-item"
    >
      <text :class="{ selected: index == props.selectIndex }" class="title">{{ item.name }}</text>
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
import { defineExpose, reactive } from 'vue'
const emit = defineEmits(['itemTap'])
const props = defineProps({
  categoryList: {
    type: Array,
    default: () => []
  },
  selectIndex: {
    type: Number,
    default: 0
  }
})

const state = reactive({
  scrollId: 'item-0'
})

const scrollToView = () => {
  // state.scrollId = 'item-' + props.selectIndex;
}

const itemAction = (index: number) => {
  emit('itemTap', index)
}

defineExpose({
  scrollToView
})
</script>

<style lang="scss" scoped>
.nav-scroll {
  height: 50px;
  width: 100%;
  white-space: nowrap;

  .slider-item {
    background-color: #ededed;
    display: inline-block;
    padding: 0 20upx;

    .title {
      font-size: 24upx;
      color: #999;
    }

    .selected {
      color: #333;
      font-weight: 600;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        bottom: -10upx;
        left: 5upx;
        right: 5upx;
        height: 5upx;
        background-color: #a85ee7;
      }
    }
  }
}
</style>
